<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        span {
            font-size: 15px;
        }

        .right {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
    <title>Document</title>

</head>

<body>
    <input type="text" class="input1"> <span class="msg1">请输入用户名</span><br />
    <input type="text" class="input2"> <span class="msg2">请输入手机号</span><br />
    <input type="text" class="input3"> <span class="msg3">请输入邮箱地址</span>

    <script>
        const input1Obj = document.querySelector(".input1");
        const input2Obj = document.querySelector(".input2");
        const input3Obj = document.querySelector(".input3");
        const msg1Obj = document.querySelector(".msg1");
        const msg2Obj = document.querySelector(".msg2");
        const msg3Obj = document.querySelector(".msg3");
        // 验证用户名的正则
        const re1 = /^[\w]{6,10}$/;
        // 验证手机号的正则，第一位必须是1开头，后面的10位必须是0-9的区间。
        const re2 = /^1(50|39|55)[\d]{8}$/
        // 432@qq.com
        const re3 = /^[\w]{3,8}@(qq|163).com$/


        input1Obj.addEventListener("blur", function () {
            if (re1.test(this.value)) {
                // 满足条件
                msg1Obj.className = 'right';
                msg1Obj.innerHTML = "输入正确";
            } else {
                msg1Obj.className = 'error';
                msg1Obj.innerHTML = "输入错误";
            }
        });

        input2Obj.addEventListener("blur", function () {
            if (re2.test(this.value)) {
                // 满足条件
                msg2Obj.className = 'right';
                msg2Obj.innerHTML = "输入正确";
            } else {
                msg2Obj.className = 'error';
                msg2Obj.innerHTML = "输入错误";
            }
        });

        input3Obj.addEventListener("blur", function () {
            if (re3.test(this.value)) {
                // 满足条件
                msg3Obj.className = 'right';
                msg3Obj.innerHTML = "输入正确";
            } else {
                msg3Obj.className = 'error';
                msg3Obj.innerHTML = "输入错误";
            }
        });
    </script>
</body>

</html>